<template>
    <div>
        <div ref="container" style="width:100%;height:100%;"></div>
        <Modal v-model="modal1" width="1000" :mask-closable="false" title="消防重点单位" footer-hide>
            <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows'  :loading='pageStatus.loading'
                   border :columns="columns1"  :data="dataTable" >
            </Table>
            <Row type="flex" justify="end" >
                <i-col span="24">
                    <Page :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
                </i-col>
            </Row>
        </Modal>
        <Modal v-model="modal2" width="1000" :mask-closable="false" title="消防重点单位详情">
            <Form>
                <Row :gutter="16" style="margin-top: 0px">
                    <i-col span="12">
                        <FormItem label='单位名称：'>
                            <Input v-model='formData.companyName' readonly></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="12">
                        <FormItem label='所属二级集团：'>
                            <Input v-model='formData.twoLevelGroupName' readonly></Input>
                        </FormItem>
                    </i-col>
                </Row>
                <Row :gutter="16">
                    <i-col span="12">
                        <FormItem label='所在地：' >
                            <Input v-model='formData.locationName' readonly></Input>
                        </FormItem>
                    </i-col>
                    <i-col span="12">
                        <FormItem label='是否消防重点单位：'>
                            <Input v-model='formData.ifEmphasis' readonly></Input>
                        </FormItem>
                    </i-col>
                </Row>
            </Form>
            <Table ref='table2' height="300"  no-data-text="没有查询到相关数据!"  border :columns="columns2"  :data="dataTable2" ></Table>
            <div slot="footer">
                <Button @click="modal2 = false" class="ivu-btn-save" >关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    import {sessionStorage} from '@/common/cacheUtils.js';
    import {Api} from '../../../api';
    import echarts from 'echarts';
    import pageCommonFunction from '@/components/pageCommonFunction.js';

    export default {
        name: "curcialFireControlUnitStatistics",
        data(){
            return {
                ...this.createCommonDataField(),
                container: {},
                containerHeight: '',
                clickParam: {},
                modal1: false,
                modal2: false,
                tableHeight: '',
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '企业名称',  align: 'center', minWidth: 180,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '12px'
                                    },
                                    on: {
                                        click: () => {
                                            this.formData = JSON.parse(JSON.stringify(params.row));
                                            this.dataTable2 = this.formData.curcialFirePositionList;
                                            this.modal2 = true;
                                        }
                                    }
                                }, params.row.companyName),
                            ]);
                        }
                    },
                    { key:'twoLevelGroupName',title: '所属二级集团',  align: 'center', minWidth: 200},
                    { key:'locationName',title: '所属地',  align: 'center', minWidth: 200},
                    { key:'ifEmphasis',title: '是否消防重点单位',  align: 'center', minWidth: 170},
                    { key:'userName',title: '填报人',  align: 'center', minWidth: 200},
                    { key:'createUserPhone',title: '填报人电话',  align: 'center', minWidth: 200},
                    { key:'createDate',title: '填报时间',  align: 'center', minWidth: 200, render: this.renderCellDate},
                ],
                dataTable: [],
                queryUrl: Api.queryCurcialFireControlUnit,
                formData: {},
                columns2: [
                    { title: '序号', width: 80, align: 'center', type: 'index'},
                    { key:'positionName',title: '消防重点部位名称',  align: 'center', minWidth: 180},
                    { key:'mainEquipment',title: '主要设备设施',  align: 'center', minWidth: 200},
                    { key:'hostSpecification',title: '主机规格型号',  align: 'center', minWidth: 200},
                    { key:'mainFireFightingFacilities',title: '配备主要消防设施',  align: 'center', minWidth: 200},
                    { key:'detection',title: '消防设施、避雷设施检测情况',  align: 'center', minWidth: 200},
                    { key:'remark',title: '备注',  align: 'center', minWidth: 200},
                ],
                dataTable2: []
            }
        },
        mounted(){
            this.setTableHeight();
            this.query();
            this.containerHeight = window.innerHeight - 128;
        },
        methods: {
            ...pageCommonFunction,
            query(){
                this.$http.get(Api.statisticsCurcialFireControlUnit).then(res => {
                    if(res.data.status === 200)
                        this.loadCharts(res.data.data);
                    else
                        this.$Message.error('请求失败');
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            loadCharts(obj){
                this.container = echarts.init(this.$refs.container);
                let option = this.getOption();
                if(obj!= undefined){
                    obj.map((i=>{
                        option.legend.data.push(i.twoLevelGroupName);
                        option.yAxis.data.push(i.twoLevelGroupName);
                        option.series[0].data.push(i.result);
                    }));
                    this.container.setOption(option);
                    this.container.resize({height: this.containerHeight});
                    this.container.on('click', (param)=> {
                        event.stopPropagation()// 阻止冒泡
                        this.clickParam = param;
                        this.queryDetail();
                    });
                }
            },
            getOption(){
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        show: false,
                        data: [],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    color: ['#f44336', '#00e5ff', '#e040fb',  '#64dd17',  '#ffeb3b'  ,'#39a2ff' , '#ff9800', '#ea80fc', '#2962ff',  '#e91e63' , '#26c6da',  '#ffab91'],
                    xAxis: {
                        type: 'value',
                    },
                    yAxis: {
                        type: 'category',
                        data: []
                    },
                    series: [
                        {
                            data: [],
                            type: 'bar',
                            label: {
                                show: true
                            },
                        }
                    ]
                }

                return option;
            },
            queryDetail(){
                this.dataToQuery.twoLevelGroupName = this.clickParam.name;
                this.dataToQuery.ifEmphasis = '是';
                this.queryAjax();
                this.modal1 = true;
            }
        }
    }
</script>

<style scoped>

</style>